<!--居民登记-->
<template lang="">
    <div class="bg">
        <!-- 头部 -->
      <van-nav-bar title="登记" left-text="返回" fixed  @click-left="onClickLeft" left-arrow>
        </van-nav-bar>
        <div class="forms">
        <!-- 输入任意文本 -->
        <van-field v-model="name" label="姓名" placeholder="请输入姓名"  />
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="tel" type="tel" class="idc"  label="证件类型" disabled  />
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field v-model="card" type="digit" placeholder="请输入证件号" @blur.native.capture="ckeid"  label="证件号码" />
        <!-- 允许输入数字，调起带符号的纯数字键盘 -->
        <van-field v-model="phone" type="number" placeholder="请输入手机号码"  label="手机号码" />
        <!-- 地区街道 -->
          <van-field
  v-model="fieldValue"
  is-link
  readonly
  label="地区"
  placeholder="请选择所在地区"
  @click="show = true"
  
/>
<van-popup v-model="show" round position="bottom">
  <van-area title="标题" 
        @confirm="onFirm"
        @cancel="show = false" :area-list="areaList" />
</van-popup>
        <!-- 输入任意文本 -->
        <van-field v-model="addres" label="街区" placeholder="请输入街区"  />
       
    </div>
    <div class="footer">
        
    </div>
    <van-button  block class="food" @click="toget">提交</van-button>

    
    </div>
</template>
<script>
import { areaList } from '@vant/area-data';
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
    
  data() {
    return {
      areaList,
      tel: "身份证",
      name: "",
      card: "",
      phone: "",
      password: "",
      addres: '',
      val: "",
       show: false,
      fieldValue: '',
      cascaderValue: '',
      login:"true",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
    };
  },
  methods: {
    // 地址事件
    onFirm(values) {
      this.val = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
        this.fieldValue = this.val;
      this.show = false;
      // console.log(this.val)
    },
    onClickLeft() {
      history.back();
    },
     onSelect1(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show1 = false;
      Toast(item.name);
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    ckeid(){
      let uid = this.card;
      this.axios.post("getid",`idcard=${uid}`).then(res=>{
        if(res.data.code==200){
          Dialog({ message: '用户已登记过啦！'})
          this.card='';
          return;
        }
        else{
          console.log(1231)
        }
      })
    },
    toget(){
      // 获取地区信息
      // console.log(this.fieldValue)
      // 生成当前时间
      var reg_id = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证
       var reg_user = /^[\u4e00-\u9fa5]{2,4}$/;    //2-4个中文字
    	var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号
      let time = new Date().getTime();
      // console.log(time)
      //发送请求 登记用户
      if(!this.name || !reg_user.test(this.name)){
        Dialog({ message: '名字只能为2~4中文！'})
        // console.log()
        return
      }
      else if(!this.card || !reg_id.test(this.card)){
        Dialog({ message: '身份证号格式错误！'})
        return
      }
      else if(!this.phone || !reg_tel.test(this.phone)){
        Dialog({ message: '手机号码格式错误！'})
        return
      }
      else if(!this.val){
        Dialog({ message: '地址不能为空'})
        return
      }
      else if(!this.addres){
        Dialog({ message: '街区不能为空'})
        return
      }
      if(this.$store.state.uid){
         this.axios.post('peoplecked',`userid=${this.$store.state.uid}&cktime=${time}&username=${this.name}&address=${this.val}&addres=${this.addres}&idcard=${this.card}&phone=${this.phone}`).then(res=>{
        // console.log(res)
          if(res.data.code===200){
                        //登记成功
                        Dialog({ message: '登记成功！'})
                        this.$router.push("/Appointment")   

                    }else if(res.data.code===500){
                        //登记失败
                        Dialog({ message: '登记失败，不能重复登记！'})   
                    }
      })

    }else{
      this.login = false;
    }
      }
     
  },
};
</script>

<style scoped>
    .forms{
        margin-top: 46px;
    }
    .idc >>> .van-field__control{
        /* border:1px solid red; */
        width: 50px;
        margin-left:200px;
    }
    
    .bg{
        height: 100vh;
        background-color: rgb(240, 240, 240);
    } 
   
    .food{  
        position: relative;
        bottom: 10px;
        width: 85%;
        background-color: rgb(102, 176, 187);
        border-radius: 10px;
        margin: 20px auto;
        color: white;
    }
</style>    